<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" :size="formSize" status-icon >
        <el-form-item label="班组名称" prop="supplier" required>
            <el-input v-model="ruleForm.supplier" />
        </el-form-item>
        <el-form-item label="联系人" prop="supplier_personal" required>
            <el-input v-model="ruleForm.supplier_personal" />
        </el-form-item>
        <el-form-item label="询价金额" prop="consult_price" required>
            <el-input v-model="ruleForm.consult_price" />
        </el-form-item>
        <el-form-item label="询价日期" prop="consult_date" required>
            <el-date-picker v-model="ruleForm.consult_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="报价金额" prop="quotation_price" required>
            <el-input v-model="ruleForm.quotation_price" />
        </el-form-item>
        <el-form-item label="报价日期" prop="quotation_date" required>
            <el-date-picker v-model="ruleForm.quotation_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%;" />
        </el-form-item>
        <!-- <el-form-item label="交货期" prop="delivery" required>
            <el-input v-model="ruleForm.delivery" />
        </el-form-item> -->
        <el-form-item label="付款方式" prop="pay_type" required> 
            <el-input v-model="ruleForm.pay_type" />
        </el-form-item>
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref,watch } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import http from '../../../../util/request';
const loading = ref<boolean>(false)

interface RuleForm {
    id:number
    labor_id: number
    supplier: string
    supplier_personal: string
    consult_price: number
    consult_date: string
    quotation_price: number
    quotation_date: string
    delivery: string
    pay_type: string
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    labor_id: 0,
    supplier: '/',
    supplier_personal: '/',
    consult_price: 0,
    consult_date: '',
    quotation_price: 0,
    quotation_date: '',
    delivery: '/',
    pay_type: '/'
})


const props = defineProps<{
    data:any,
    labor_id:any
}>()

watch(props,()=>{
    ruleForm.value.labor_id = props.labor_id
    ruleForm.value.id = props.data
    ruleForm.value.supplier = '/',
    ruleForm.value.supplier_personal = '/',
    ruleForm.value.consult_price = 0,
    ruleForm.value.consult_date = '',
    ruleForm.value.quotation_price = 0,
    ruleForm.value.quotation_date = '',
    ruleForm.value.delivery = '/',
    ruleForm.value.pay_type = '/'
},{ immediate: true })

const rules = reactive<FormRules<RuleForm>>({
    supplier: [
        { required: true, message: '请输入班组名称', trigger: 'blur' }
    ],
    supplier_personal: [
        { required: true, message: '请输入联系人', trigger: 'blur' }
    ],
    consult_price: [
        { required: true, message: '请输入金额', trigger: 'blur' }
    ],
    consult_date: [
        { required: true, message: '请选择日期', trigger: 'blur' }
    ],
    quotation_price: [
        { required: true, message: '请输入金额', trigger: 'blur' }
    ],
    quotation_date: [
        { required: true, message: '请选择日期', trigger: 'blur' }
    ],
    delivery: [
        { required: true, message: '请输入交货期', trigger: 'blur' }
    ],
    pay_type: [
        { required: true, message: '请输入付款方式', trigger: 'blur' }
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/labor/contrast',ruleForm.value)
            }else{
                request = http.put('/labor/contrast',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                onSave()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onSave = () => {
    emit('onSave')
}

const emit = defineEmits(['onSave'])
</script>
<style scoped>
.el-tab-pane{height: calc(100vh - 25vh);overflow-y: scroll;}
::v-deep .el-form-item .el-form-item__label {
  font-size: 16px; /* 或者你想要的任何大小 */
}
::v-deep .el-tabs__item{font-size: 18px !important;}
</style>
